$size: (
  0: 0,
  1: 1,
  2: 2,
  3: 3,
  4: 4,
  5: 5,
  6: 6,
  7: 7,
  8: 8,
  9: 9,
  10: 10,
  12: 12,
  13: 13,
  14: 14,
  15: 15,
  16: 16,
  17: 17,
  18: 18,
  20: 20,
  25: 25,
  28: 28,
  30: 30,
  33: 33,
  35: 35,
  40: 40,
  45: 45,
  50: 50,
  55: 55,
  60: 60,
  65: 65,
  70: 70,
  75: 75,
  80: 80,
  85: 85,
  90: 90,
  95: 95,
  100: 100,
  105: 105,
  110: 110,
  115: 115,
  120: 120,
  125: 125,
  130: 130,
  135: 135,
  140: 140,
  145: 145,
  150: 150,
  155: 155,
  160: 160,
  165: 165,
  170: 170,
  175: 175,
  180: 180,
  185: 185,
  190: 190,
  195: 195,
  200: 200,
  205: 205,
  210: 210,
  215: 215,
  220: 220,
  225: 225,
  230: 230,
  235: 235,
  240: 240,
  245: 245,
  250: 250,
  255: 255,
  260: 260,
  265: 265,
  270: 270,
  275: 275,
  280: 280,
  285: 285,
  290: 290,
  295: 295,
  300: 300,
  450: 450,
);

@each $key, $value in $size {
  .m#{$key} {
    margin: $value + rpx;
  }
  .ml#{$key} {
    margin-left: $value + rpx;
  }
  .mr#{$key} {
    margin-right: $value + rpx;
  }
  .mt#{$key} {
    margin-top: $value + rpx;
  }
  .mb#{$key} {
    margin-bottom: $value + rpx;
  }
  .mtb#{$key} {
    margin-top: $value + rpx;
    margin-bottom: $value + rpx;
  }
  .mlr#{$key} {
    margin-left: $value + rpx;
    margin-right: $value + rpx;
  }
  .p#{$key} {
    padding: $value + rpx;
  }
  .pl#{$key} {
    padding-left: $value + rpx;
  }
  .pr#{$key} {
    padding-right: $value + rpx;
  }
  .pt#{$key} {
    padding-top: $value + rpx;
  }
  .pb#{$key} {
    padding-bottom: $value + rpx;
  }
  .plr#{$key} {
    padding-right: $value + rpx;
    padding-left: $value + rpx;
  }
  .ptb#{$key} {
    padding-top: $value + rpx;
    padding-bottom: $value + rpx;
  }
  .border#{$key} {
    border: $value solid #000;
  }
  .br#{$key} {
    border-radius: $value + rpx;
  }
  .f#{$key} {
    font-size: $value + rpx;
  }
  .w#{$key} {
    width: $value + 100% - 100%;
  }
  .h#{$key} {
    height: $value + 100% - 100%;
  }
}

$colors: (
  black: #000,
  white: #fff,
  darker: #333,
  dark: #999,
  light: #aaa,
  lighter: #eee,
  main: rgb(26, 179, 190),
  danger: rgb(252, 199, 6),
  warning: rgb(237, 31, 12),
  info: rgb(5, 255, 21),
  primary: rgb(16, 73, 216),
  blue-theme: #409eff,
  inverse-theme: #545c64,
  green: rgb(30,215,109),
  jianbi: #ff8b32,
  quanyi: #FCF6EA,
  anniu: #F5E7C3,
  anli: #DFC481,
  shipinqu: #D7D7D7,
  paihang: #EFCDB2,
  shijian: #B3B3B3,
  hopedetail: #616161,
);

@each $key, $value in $colors {
  .bg-#{"" + $key} {
    background-color: $value;
  }
  .text-#{"" + $key} {
    color: $value;
  }
  .border-#{"" + $key} {
    border-color: $value;
  }
}

@mixin size($w, $h) {
  width: $w;
  height: $h;
}

@mixin square($w) {
  @include size($w, $w);
}
